<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form :inline="true" :model="query" @keyup.enter.native="toQuery()">
        <!-- 搜索 -->
        <el-form-item label="用户id：">
          <el-input v-model="query.uid" placeholder="用户id" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="query.name" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <span class="demonstration">选择时间：</span>
        <el-date-picker
          v-model="chooseDate"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          clearable
        ></el-date-picker>
        <el-form-item style="margin-left: 1%">
          <el-button type="primary" @click="toQuery()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetQuery()">刷新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="info"
            icon="el-icon-download"
            size="small"
            @click="handleExport"
          >导出
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            :disabled="multiple"
            @click="handleDelete"
          >批量删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表单组件-->
    <!--    <eForm ref="form" :is-add="isAdd"/>-->
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;text-align-all: center"
              @selection-change="handleSelectionChange" :header-cell-style="{background:'#EAE9E9FF'}"
    >
      <el-table-column type="selection" width="50px"/>
      <el-table-column prop="uid" label="用户id" width="70%"/>
      <el-table-column prop="nickname" label="用户名称"/>
      <el-table-column prop="realName" label="真实姓名"/>
      <el-table-column prop="bankName" label="开户行"/>
      <el-table-column prop="bankAddress" label="开户支行"/>
      <el-table-column prop="phone" label="手机号"/>
      <el-table-column prop="bankCode" label="账号"/>
      <el-table-column prop="createTime" label="添加时间"/>
      <el-table-column
        label="管理"
        align="center"
        width="240px"
      >
        <template slot-scope="scope">
          <!--          <el-button size="mini" type="success" @click="success(scope.row.id)" v-if="scope.row.status === 0">通过-->
          <!--          </el-button>-->
          <el-button size="mini" type="success" @click="handleUpdate(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="primary" @click="showDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <show-detail v-if="showVisible" ref="showDetail" @refreshDataList="toQuery"></show-detail>
    <handle-update v-if="updateVisible" ref="handleUpdate" @refreshDataList="toQuery"></handle-update>
  </div>
</template>

<script>
import showDetail from './showDetail'
import handleUpdate from './handleUpdate'
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del, exportRecord, edit } from '@/api/ums/bank'
// import eForm from './form'
import { downloadFile, formatTimeTwo } from '@/utils/index'

export default {
  components: { showDetail, handleUpdate },
  mixins: [initData],
  data() {
    const shortcuts = {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
    return {
      showVisible: false,
      updateVisible: false,
      delLoading: false,
      // 非多个禁用
      multiple: true,
      chooseDate: [],
      pickerOptions: shortcuts,
      queryTypeOptions: [
        { key: '-1', display_name: '审核拒绝' },
        { key: '0', display_name: '待审核' },
        { key: '1', display_name: '审核成功' }
      ],
      selectionId: [],
      dataForm: {
        id: '',
        isDelete: '',
        createBy: '',
        updateBy: '',
        createTime: '',
        updateTime: '',
        remark: '',
        uid: '',
        nickname: '',
        realName: '',
        bankName: '',
        bankAddress: '',
        bankCode: '',
        phone: '',
      }
    }
  },

  created() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    formatTimeTwo,
    checkPermission,
    beforeInit() {
      this.url = 'admin/api/bank_info/list'
      this.params = {
        uid: this.query.uid,
        name: this.query.name,
        startTime: this.chooseDate == null ? '' : this.chooseDate[0],
        endTime: this.chooseDate == null ? '' : this.chooseDate[1]
      }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) {
        this.params[type] = value
      }
      return true
    },

    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return del(ids)
      }).then(() => {
        // this.$refs[id].doClose()
        this.toQuery()
        this.$message.success('操作成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const dataForm = this.dataForm
      delete dataForm.pageNum
      delete dataForm.pageSize
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportRecord(dataForm)
      }).then(response => {
        downloadFile(response.data, '数据', 'xls')
      })
    },
    showDetail(id) {
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.showDetail.init(id)
      })
    },
    handleUpdate(id) {
      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.handleUpdate.init(id)
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.query = {}
      this.chooseDate = []
      this.toQuery()
    }

  }
}
</script>

<style scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
